<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="UTF-8">
  <title>授权模块 - TyFast Platform</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <!--/* 授权模块代码片段 */-->
  <th:block th:fragment="grant">
    <!-- 右侧抽屉窗口 :: 已授权角色列表 -->
    <v-navigation-drawer :order="-1" v-model="winDrawer" temporary floating location="right" :width="winDrawerWidth">
      <v-layout full-height>
        <v-sheet class="w-100 overflow-auto">
          <v-app-bar flat color="indigo-darken-2">
            <v-toolbar-title class="text-subtitle-1 font-weight-bold">
              {{$t('授权主体')}}：{{selectedItemName}} {{$t('被授予的角色列表')}}
            </v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon="mdi-close" @click="closeWinDrawer"></v-btn>
          </v-app-bar>
          <v-card flat tile :loading="loading" class="mt-16 mb-8">
            <v-container class="pt-0 px-0">
              <!-- 已授予的角色列表 -->
              <v-data-table-virtual
                  :loading="loading"
                  :headers="datatableRole.headers"
                  :items="datatableRole.items"
                  item-value="roleId"
                  mobile-breakpoint="md"
                  hover
              >
                <template #top shiro:hasPermission="/system/user/grant/save">
                  <v-row>
                    <v-col>
                      <v-btn color="info" class="mt-1 ml-2 pr-5 pl-4" @click="openWinFormDrawer">
                        <v-icon size="small">mdi-plus</v-icon>
                        {{$t('授权')}}
                      </v-btn>
                    </v-col>
                  </v-row>
                </template>
                <template v-slot:item.index="{index}">
                  {{index + 1}}
                </template>
                <template v-slot:item.operation="{item}">
                  <v-btn-confirm :data="item.roleId" @confirm="doRoleDelete" shiro:hasPermission="/system/user/grant/del"></v-btn-confirm>
                </template>
              </v-data-table-virtual>
            </v-container>
          </v-card>
        </v-sheet>
        <v-footer app class="border-t-thin justify-end">
          <v-btn variant="outlined" @click="closeWinDrawer">{{$t('关闭')}}</v-btn>
        </v-footer>
      </v-layout>
    </v-navigation-drawer>

    <!-- 右侧抽屉窗口 :: 可授予的角色列表 -->
    <v-navigation-drawer :order="-2" v-model="winFormDrawer" persistent temporary floating location="right" width="800" shiro:hasPermission="/system/user/grant/save">
      <v-layout full-height>
        <v-sheet class="w-100 overflow-auto">
          <v-app-bar flat color="indigo-darken-2">
            <v-toolbar-title class="text-subtitle-1 font-weight-bold">{{$t('角色列表')}}</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon="mdi-close" @click="closeWinFormDrawer"></v-btn>
          </v-app-bar>
          <v-card flat tile :loading="loading" class="mt-16 mb-8">
            <v-card-title>
              <v-text-field v-model="searchKey" prepend-inner-icon="mdi-magnify" clearable hide-details :label="$t('请输入角色名称')"></v-text-field>
            </v-card-title>
            <v-card-text>
              <v-data-table-virtual
                  v-model="grantFormData.selectedItems"
                  :headers="datatableRoleCan.headers"
                  :items="datatableRoleCan.items"
                  item-value="roleId"
                  :search="searchKey"
                  :filter-keys="['roleName']"
                  mobile-breakpoint="md"
                  hover
                  show-select
                  :loading="loading"
              >
                <template v-slot:item.index="{index}">
                  {{index + 1}}
                </template>
                <template v-slot:header.data-table-select="{ allSelected, selectAll, someSelected }">
                  <v-checkbox-btn color="primary" :indeterminate="someSelected && !allSelected" :model-value="allSelected"@update:model-value="selectAll(!allSelected)"></v-checkbox-btn>
                </template>
                <template v-slot:item.data-table-select="{ internalItem, isSelected, toggleSelect }">
                  <v-checkbox-btn color="primary" :model-value="isSelected(internalItem)" @update:model-value="toggleSelect(internalItem)"></v-checkbox-btn>
                </template>
              </v-data-table-virtual>
            </v-card-text>
          </v-card>
        </v-sheet>
        <v-footer app class="border-t-thin justify-end">
          <v-btn variant="outlined" class="mr-4" :disabled="posting" @click="closeWinFormDrawer">{{$t('关闭')}}</v-btn>
          <v-btn color="info" :loading="posting" :disabled="grantFormData.selectedItems.length == 0" @click="doGrantSubmit">{{$t('保存')}}</v-btn>
        </v-footer>
      </v-layout>
    </v-navigation-drawer>

    <!-- 业务js -->
    <script type="text/javascript" th:src="@{/js/system/user/user-role.js?_t=#buildtime#}"></script>
  </th:block>
</body>
</html>